@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";

.message_info_box_wrapper {
  padding: Spacings.$spacing03;
  display: flex;
  align-items: center;
  gap: Spacings.$spacing03;
  width: fit-content;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  border-radius: Radius.$normal;

  &.success {
    border-color: var(--success);
    color: var(--success);
    background-color: var(--success-lightest);
  }

  &.info {
    border-color: var(--primary-0);
    color: var(--primary-0);
    background-color: var(--primary-2);
  }

  &.warning {
    border-color: var(--warning);
    color: var(--warning);
    background-color: var(--warning-lightest);
  }

  &.tutorial {
    border-color: var(--gold);
    color: var(--gold);
    background-color: var(--gold-lightest);
  }

  &.dark {
    background-color: var(--background-primary-0);
  }
}
